<template>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
      <router-link
        class="navbar-brand"
        :to="{ name: 'home' }"
        style="font-family: 站酷快乐体2016修订版"
      >
        <img
          style="color: pink"
          src="../assets/airplane-engines-fill.svg"
          width="30"
          height="30"
          class="d-inline-block align-top"
          alt=""
        />
        风雪龙图库
      </router-link>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent" style="width: 50%">
        <ul
          class="navbar-nav d-flex justify-content-between align-items-center ml-5"
          style="width: 100%; height: 100%"
        >
          <li class="nav-item">
            <router-link
              :class="'nav-link' + (route_name == 'home' ? ' active' : '')"
              :to="{ name: 'home' }"
              >首页</router-link
            >
          </li>

          <li class="nav-item">
            <router-link
              :class="'nav-link' + (route_name == 'userManage' ? ' active' : '')"
              :to="{ name: 'userManage' }"
              >用户管理</router-link
            >
          </li>

          <li class="nav-item">
            <router-link
              :class="'nav-link' + (route_name == 'pictureAdd' ? ' active' : '')"
              :to="{ name: 'pictureAdd' }"
              >图片创建</router-link
            >
          </li>
          <li class="nav-item">
            <router-link
              :class="'nav-link' + (route_name == 'pictureManage' ? ' active' : '')"
              :to="{ name: 'pictureManage' }"
              >图片管理</router-link
            >
          </li>
          <li>
            <form class="form-inline my-2 my-lg-0">
              <input
                class="form-control mr-sm-2"
                type="search"
                placeholder="Search"
                aria-label="Search"
              />
              <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
          </li>
          <li class="nav-item dropdown" v-if="Number(loginStore.loginUser.id.substring(0, 2)) > 0">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              role="button"
              data-toggle="dropdown"
              aria-expanded="false"
            >
              <img
                :src="loginStore.loginUser.userAvatar"
                style="max-width: 50px; border-radius: 50%"
              />
              {{ loginStore.loginUser.userAccount }}
            </a>
            <div class="dropdown-menu dropdown-menu-right">
              <a class="dropdown-item" herf="#">个人中心</a>
              <a class="dropdown-item" href="#" @click="logout">退出登录</a>
            </div>
          </li>

          <li class="nav-item dropdown" v-else>
            <a
              class="nav-link dropdown-toggle"
              href="#"
              role="button"
              data-toggle="dropdown"
              aria-expanded="false"
            >
              登录
            </a>
            <div class="dropdown-menu dropdown-menu-right">
              <router-link class="dropdown-item" :to="{ name: 'login' }">登录</router-link>
              <a class="dropdown-item" href="#">注册</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { useLoginStore } from '@/stores/loginStore.js'
import { userLogout } from '@/api/user.js'
import { useToastStore } from '@/stores/toastStore.js'
import { useRoute } from 'vue-router'
import { computed, watch } from 'vue'
import { message } from 'ant-design-vue'
const route = useRoute()
let route_name = computed(() => route.name)

const loginStore = useLoginStore()

const toastStore = useToastStore()
const logout = async () => {
  const res = await userLogout()
  try {
    if (res?.data?.code === 0 && res?.data?.data) {
      if (res.data.data === true) {
        loginStore.userLogout()
      } else {
        toastStore.set(true, '退出失败请重试')
      }
    }
  } catch (e) {
    toastStore.set(true, e.message)
  }
}
</script>
